<template>
    <div class="icons">
     <swiper>
        <swiper-slide v-for="item of iconList" :key="item.id">
        <div class="icon">
            <div class="icon-img">
                <img class="icon-content"  :src="item.imgUrl" />
            </div>
            <p class="icon-desc">{{item.desc}}</p>
        </div></swiper-slide>
     </swiper>
    </div>
</template>
<script>
export default {
  name: 'HomeIcon',
  data () {
    return {
      iconList:[{
          id: "001",
          imgUrl: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=180357288,1295937553&fm=58",
          desc: "aaa"
        }, {
          id: "002",
          imgUrl: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=180357288,1295937553&fm=58",
          desc: "bbb"
        }, {
        id: "003",
        imgUrl: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=180357288,1295937553&fm=58",
        desc: "ccc"
        }, {
        id: "004",
        imgUrl: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=180357288,1295937553&fm=58",
        desc: "ddd"
        }, {
        id: "005",
        imgUrl: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=180357288,1295937553&fm=58",
        desc: "eee"
        }, {
        id: "006",
        imgUrl: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=180357288,1295937553&fm=58",
        desc: "fff"
        }, {
        id: "007",
        imgUrl: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=180357288,1295937553&fm=58",
        desc: "ggg"
        }, {
        id: "008",
        imgUrl: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=180357288,1295937553&fm=58",
        desc: "hhh"
        }, {
        id: "009",
        imgUrl: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=180357288,1295937553&fm=58",
        desc: "jjj"
        }, {
        id: "010",
        imgUrl: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=180357288,1295937553&fm=58",
        desc: "kkk"
        }, {
        id: "011",
        imgUrl: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=180357288,1295937553&fm=58",
        desc: "lll"
        }, {
        id: "012",
        imgUrl: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=180357288,1295937553&fm=58",
        desc: "mmm"
        }]
      }
  }
}
</script>
<style lang="stylus" scoped>
 @import '~styles/all.styl'
.icons >>> .swiper-container
  padding-bottom : 50%
  width :10rem
  margin: 0  auto
 .icon
    position :relative
    overflow :hidden
    float: left
    width : 25%
    padding-bottom :20%
    .icon-img
        position:absolute
        top:0
        left :0
        right :0
        border-bottom :.44rem
        padiding .1rem
  .icon-content
        display:block
        margin:0 auto
        height :100%
    .icon-desc
    position :absolute
    left :0
    right :0
    bottom :0
    height :.44rem
    line-height :.44rem
    text-align :center
    color:$descColor     
</style>


